<template>
  <div id="app">
    <div class="wrapper" style="padding-top:80px;">
      <div class="header" style="z-index:99;position:fixed;height:80px;background:#4abdcc;">
        <!-- <button id="show">显示</button> -->
        <div class="mod-head" style="margin:0 auto;width:1000px">
          <div class="logo" style="float:left;width:100px;height:80px">
            <img
              style="100%;height:100%"
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555391832036&di=96fd7a1bb71e21ae4ab9c4fb00135de0&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F70%2F52%2F08J58PICHcQ_1024.jpg"
              alt
            >
          </div>
         
          <div class="nav" id="nav" style="visibility:hidden;float:left;margin-left:30px;line-height:80px">
            <a @click="toChina">境内游</a>
            <a
              onclick=" document.getElementById('abroad').scrollIntoView(
        {
          behavior:'smooth'
        }
      );"
            >境外游</a>
            <a
              onclick="document.getElementById('travel').scrollIntoView(
        {
          behavior:'smooth'
        }
      );"
            >旅游游记</a>
          </div>
         
          <div class="right" style="float:left;margin-left:50px;height:100%;">
            <div
              class="user"
              ref="user"
              style="display:block;height:100%;line-height:80px;float:right"
            >
              <div class="h" style="height:80px">
                <img
                  style="border-radius:50%;width:30px;height:30px"
                  src="./assets/images/head.png"
                  alt
                >
                <span style="color:#fff">{{userName}}</span>&nbsp;
                <a class="exit" style="color:#fff" ref="exit" @click="exit">退出</a>
              </div>
            </div>

            <div
              class="login-register"
              style="position:relative;height:100%;line-height:80px;float:right"
            >
              <input type="text" placeholder="按城市名搜索" v-model="searchKey" >
              <!-- <router-link to="/home/searchCity">搜索</router-link> -->
              <input type="text" @click="searchCity" class="search-city" value="搜索" />
              <span style="position:absolute;top:1px;left:5px;" class="iconfont icon-sousuo"></span>
              <div ref="lg" style="display:block;float:right">
                <a @click.prevent="login">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a @click.prevent="register">注册</a>
              </div>
            </div>
          </div>
        </div>

        <div class="mod-login mod-login-show" ref="loginShow" style="display:none">
          <div class="mask"></div>
          <div class="dialog">
            <div class="panel login" ref="login" style="display:none;">
              <div class="hd">
                <span>登录</span>
                <a class="close" @click="close"></a>
              </div>
              <div class="bd">
                <form method="post" action autocomplete="off">
                  <p class="error" ref="logError"></p>
                  <p>
                    <span class="icon icon-phone">
                      <input
                        style
                        class="input-text"
                        name="username"
                        placeholder="请输入昵称"
                        autocomplete="on"
                        maxlength="11"
                        v-model="loginName"
                      >
                    </span>
                  </p>
                  <p>
                    <span class="icon icon-key">
                      <input
                        type="password"
                        class="input-text"
                        name="password"
                        placeholder="密码"
                        autocomplete="on"
                        v-model="loginPassword"
                      >
                    </span>
                  </p>

                  <p class="btn">
                    <input class="input-submit" type="submit" @click.prevent="submit" value="登 录">
                  </p>
                  <p class="separate">
                    <span class="line"></span>
                    <span class="or">或</span>
                  </p>
                  <p class="link">
                    <a class="switch" @click="register">立即注册</a>
                  </p>
                </form>
              </div>
            </div>
            <div class="panel reg" ref="register" style="display:none;">
              <div class="hd">
                <span>快速注册</span>
                <a class="close" @click="close"></a>
              </div>
              <div class="bd">
                <form method="post" action autocomplete="off">
                  <p class="error" ref="regError"></p>
                  <p>
                    <span class="icon icon-phone">
                      <input
                        class="input-text"
                        name="username"
                        placeholder="请输入昵称"
                        autocomplete="on"
                        maxlength="11"
                        v-model="registerName"
                      >
                    </span>
                  </p>

                  <p>
                    <span class="icon icon-key">
                      <input
                        type="password"
                        class="input-text"
                        name="password"
                        placeholder="设置密码"
                        autocomplete="on"
                        v-model="registerPassword"
                      >
                    </span>
                  </p>
                  <p class="btn">
                    <input class="input-submit" type="submit" @click.prevent="reg" value="立即注册">
                  </p>
                  <p class="separate">
                    <span class="line"></span>
                    <span class="or">或</span>
                  </p>
                  <p class="link">
                    <a class="switch" @click="login">登录</a>
                  </p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <router-view></router-view>
      <router-link to="/home" tag="div"></router-link>
      <div class="footer">
        <!-- <div class="mod-mfoot">
          <div class="copyright">Copyright &copy; 2016 liantu.cn</div>
        </div> -->
        Copyright &copy;Mr_He
      </div>
    </div>

    <div class="hide"></div>
  </div>
</template>
<script>
//引入layui弹出层
//import layui from './assets/js/layui.all.js'
export default {
  name: "App",
  data() {
    return {
      searchKey:'',
      searchList:[],
      userName: "",
      loginName: "",
      loginPassword: "",
      registerName: "",
      registerPassword: ""
    };
  },
  mounted() {
    //表示用户已经登陆了，此时登录与注册选项隐藏，用户信息显示
    if (localStorage.getItem("user") != null) {
      this.$refs.lg.style.display = "none";
      this.userName = localStorage.getItem("user");
    } else {
      //表示用户没有登录
      this.$refs.user.style.display = "none";
    }
  },
  methods: {
    //搜索景点根据名字
     searchCity(){
  if(this.searchKey.trim()==""){
        this.$Message.error("关键字不能为空！");
       return false;
      }
      this.$router.push({path:'/home/searchCity',query:{name:this.searchKey}})
      //刷新可以解决第二次搜索时跳转相同路径资源不加载的问题
      window.location.reload();
     },
    //登录提交密码
    submit() {
      if (this.loginName.trim() == "" || this.loginPassword.trim() == "") {
        this.$refs.logError.innerHTML = "用户名或者密码不能为空";
        //alert("用户名或者密码不能为空");
        return false;
      }
      //账号，密码符合规范，进行下一步
      //返回一个销毁的函数
      const msg = this.$Message.loading({
        content: "登录中",
        duration: 0
      });

      this.$axios
        .get("/login", {
          params: {
            userName: this.loginName,
            userPassword: this.loginPassword
          }
        })
        .then(res => {
          setTimeout(msg, 1000);
          //表示登录成功
          if (res.data.msg == "success") {
            localStorage.setItem("user", this.loginName);

            this.$refs.lg.style.display = "none";
            this.$refs.user.style.display = "block";

            setTimeout(() => {
              this.$Message.success("登录成功");
              this.$refs.loginShow.style.display = "none";
              this.userName = this.loginName;
            }, 1300);
          } else {
            setTimeout(() => {
              this.$Message.error("账号或密码错误");
            }, 1300);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //注册提交代码
    reg() {
      if (
        this.registerName.trim() == "" ||
        this.registerPassword.trim() == ""
      ) {
        this.$refs.regError.innerHTML = "用户名或者密码不能为空";
        return false;
      }
      const msg = this.$Message.loading({
        content: "注册中",
        duration: 0
      });

      this.$axios
        .get("/register", {
          params: {
            userName: this.registerName,
            userPassword: this.registerPassword
          }
        })
        .then(res => {
          setTimeout(msg, 1000);
          //表示登录成功
          if (res.data.msg == "success") {
            setTimeout(() => {
              this.$Message.success("注册成功");
            }, 1300);
          } else {
            setTimeout(() => {
              this.$Message.error("用户已存在");
            }, 1300);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    toChina() {
      document.getElementById("china").scrollIntoView({
        behavior: "smooth"
      });
      console.log("hello");
    },
    login() {
      this.$refs.loginShow.style.display = "block";
      this.$refs.login.style.display = "block";
      this.$refs.register.style.display = "none";
    },
    register() {
      this.$refs.loginShow.style.display = "block";
      this.$refs.register.style.display = "block";
      this.$refs.login.style.display = "none";
    },
    close() {
      this.$refs.loginShow.style.display = "none";
      console.log("clodse");
    },
    exit() {
      //点击退出的时候，清除用户登录信息
      localStorage.removeItem("user");
      console.log(localStorage.getItem("user"));
      this.$refs.lg.style.display = "block";
      this.$refs.user.style.display = "none";
    }
  }
};
</script>

<style  lang="scss" >

.mod-destination .pic:hover {
  transform: scale(1.4);
  transition: all 1s ease;
}
.exit {
  // display: block;
  border: 1px solid #fff;
  padding: 5px 10px;
  border-radius: 10px;
  // width:30px;
  // height:30px;
}
.exit:hover {
  border: 1px solid #168391;
}
.nav a {
  font-size: 20px;
  color: #fff;
  margin-left: 20px;
  display: inline-block;
  height: 80px;
  width: 100px;
  text-align: center;
}
.nav a.active {
  color: #168391;
}
.nav a:hover {
  background-color: #168391;
}
.logo img {
  width: 100%;
  height: 100%;
}
.login-register {
  font-size: 20px;
  color: #fff;
  input::-webkit-input-placeholder {
    color: #fff;
  }
  input {
    background: #4abdcc;
    height: 30px;
    outline: none;
    border: 1px solid #fff;
    width: 150px;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    border-radius: 20px;
    margin-right: 20px;
    color: #fff;
  }
  .search-city:hover{
  cursor: pointer;
  background-color: #168391;
  }
.search-city{
 background: #4abdcc;
    height: 30px;
    outline: none;
    border: 1px solid #fff;
    width: 50px;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    border-radius: 20px;
     margin-left: -10px;
    color: #fff;
}


  a {
    font-size: 18px;
    color: #fff;
  }
  a:hover {
    color: #168391;
  }
}
.footer {
  background-color: #4abdcc !important;
  height: 80px;
  text-align: center;
  line-height:80px;
  color:#fff;
  font-size:18px


}
</style>
